import { computed, defineComponent, PropType, ref, Teleport } from "vue";

const CvPanel = defineComponent({
  name: "CvPanel",
  props: {
    cv: {
      type: Object as PropType<TCvInfo>,
      required: true,
    },
  },
  setup(props) {
    const preSrc = ref("");

    const url = computed(() => {
      if (props.cv.update) {
        preSrc.value = props.cv.url;
        return props.cv.url;
      } else {
        return preSrc.value;
      }
    });

    const fullScreenFlag = ref(false);
    const fullScreen = () => {
      fullScreenFlag.value = !fullScreenFlag.value;
    };

    return () => (
      <>
        <img
          onClick={fullScreen}
          class="object-fill   mb-2"
          src={url.value}
          alt="图片加载失败"
        />
        <Teleport to="body">
          <img
            v-show={fullScreenFlag.value}
            onClick={fullScreen}
            class="object-fill h-3/4 w-3/4 mb-2 absolute top-1/2 left-1/2 z-20 -translate-x-1/2 -translate-y-1/2"
            src={url.value}
            alt="图片加载失败"
          />
        </Teleport>
      </>
    );
  },
});

export default CvPanel;

